<template>
	<div>
		<el-form ref="form" :model="form" label-width="100px">
			<el-form-item label="标题" class="form">
				<el-input v-model="form.title" placeholder="请输入项目标题"></el-input>
			</el-form-item>
			<el-form-item label="封面" class="banners">
				<Pic :url="form.img" index="img" @get_url="get_icon"></Pic>
			</el-form-item>

			<el-form-item label="文章内容">
				<Edit :contents="form.content" :content_back="get_content"></Edit>
			</el-form-item>

		</el-form>
		<el-button type="primary" @click="sub()">提交</el-button>
		<el-button type="primary" @click="back_url()">返回</el-button>
	</div>
</template>

<script>
	import Pic from '../../components/UploadPicOne.vue'
	import Amap from '../../components/amap.vue'
	import Edit from '../../components/quill-editor.vue'
	export default {
		components: {
			Pic,
			Amap,
			Edit
		},
		data() {
			return {
				form: {
					title: '',
					img: '',
					content: ''
				},
				icon: this.$get_img + 'public/sys/icon/position.png',
				inputVisible: false,
				inputValue: '',
				edit_type: 0, //0添加1编辑
			}
		},
		mounted() {

			let data = JSON.parse(localStorage.getItem('edit_article'));
			if (data) {
				this.edit_type = 1
				this.form = data
				localStorage.removeItem('edit_article')
			}

		},
		methods: {
			//submit
			sub() {
				this.form.sort = parseInt(this.form.sort)
				if (this.edit_type == 0) {
					this.$model.post("/cms/article/create", this.form).then(res => {
						if (res.code == 200) {
							this.$message({
								message: '添加成功',
								type: 'success'
							});
							this.back_url()
						}
					})
				} else {
					this.$model.post("/cms/article/update", this.form).then(res => {
						if (res.code == 200) {
							this.$message({
								message: '更新成功',
								type: 'success'
							});
							this.back_url()
						}
					})
				}
			},

			handleClose(index) {
				this.form.label.splice(index, 1)
			},
			get_content(e) {
				this.form.content = e
			},
			get_position(e) {
				this.form.lng = e[0]
				this.form.lat = e[1]
			},
			get_banners(e) {
				this.form.banners.push(e.url)
			},
			get_icon(e) {
				this.form.img = e.url
			},
			handleInputConfirm() {
				let inputValue = this.inputValue;
				if (inputValue) {
					this.form.label.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			},
			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			}
		}
	}
</script>

<style>
	.form {
		width: 800px;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.banners {
		width: 600px;
	}
</style>
